<!DOCTYPE html>
<html>
<head>
  <title>simple</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.css">
  <script src="http://webapi.amap.com/maps?v=1.4.2&key=6cb85da518029607d421917b7ddeb94a"></script>
  <style>
    html, body, #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
</head>
<body>
<div id="map"></div>
<script src="../packages/amap/dist/amap-wind.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.js"></script>
<script>

  var map = new AMap.Map('map', {
    viewMode: '3D',
    resizeEnable: true,
    zoom: 0,
    center: [113.53450137499999, 34.44104525],
    // mapStyle: 'amap://styles/dark',
    zooms: [0, 18]
  });

  fetch('https://sakitam-fdd.github.io/wind-layer/data/wind.json')
    .then(res => res.json())
    .then(res => {
      var config = {
        minVelocity: 0, // 粒子强度最小的速度 (m/s)
        maxVelocity: 10, // 粒子强度最大的速度 (m/s)
        velocityScale: 0.05, // 风速的比例
        particleAge: 90, // 重绘之前生成的离子数量的最大帧数
        lineWidth: 1, // 绘制粒子的线宽
        paths: 1000,
      };

      var layer = new AMapWind.WindLayer(res, {
        // projection: 'EPSG:4326',
        zIndex: 20,
        colorScale: "rgb(255, 255, 255)",
        velocityScale: 1 / 30,
        paths: 1000,
        // bounds: map.getBounds(),
      });

      const gui = new dat.GUI();
      gui.add(config, 'minVelocity', 0, 10).onChange(function (value) {
        layer.updateParams(config);
      });
      gui.add(config, 'maxVelocity', 1, 15).onChange(function (value) {
        layer.updateParams(config);
      });
      gui.add(config, 'velocityScale', 0.05, 0.1).step(0.01).onChange(function (value) {
        layer.updateParams(config);
      });
      gui.add(config, 'particleAge', 0, 180).onChange(function (value) {
        layer.updateParams(config);
      });
      gui.add(config, 'lineWidth', 1, 10).onChange(function (value) {
        layer.updateParams(config);
      });
      gui.add(config, 'paths', 0, 5000).step(10).onFinishChange(function (value) {
        layer.updateParams(config);
      });

      layer.appendTo(map);

      setTimeout(() => {
        // layer.removeLayer();
      }, 5000)
    });
</script>
</body>
</html>
